<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/JSP/Common/head.jsp"%>
<div class="nowPosition">你所在的位置是修改供应商</div>
<div class="updateSup-div">
    <p style="padding-left: 8%;font-family: '楷体';color: red">${MESSAGE}</p>
    <form action="${pageContext.request.contextPath}/JSP/sup.go" method="post" id="updateSupForm">
        <input type="hidden" name="method" value="updateSupSubmit">
        <input type="hidden" name="supId" value="${sup.id }"/>
        <label>
            <span class="updateSup-span">编号</span>
            <input id="supCode" name="supCode" type="text" disabled="disabled" value="${sup.supCode}" class="updateSup-input-text inshadow txtclick" />
        </label><br />
        <label>
            <span class="updateSup-span">公司</span>
            <input id="supName" name="supName" type="text" value="${sup.supName}" class="updateSup-input-text inshadow txtclick" placeholder="请输入公司名" />
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <span class="updateSup-span">联系人</span>
            <input id="contacts" name="contacts" type="text" value="${sup.contacts}" class="updateSup-input-text inshadow txtclick" placeholder="请输入姓名" />
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <span class="updateSup-span">用户性别</span>
            <!--<input id="userSex" type="text" class="addUser-input-text inshadow txtclick" placeholder="性别" />-->
            <select id="gender" name="gender" class="updateSup-genderSelect inshadow txtclick">
                <option <c:if test='${sup.gender == "女"}'>selected="selected"</c:if> value="女">女</option>
                <option <c:if test='${sup.gender == "男"}'>selected="selected"</c:if> value="男">男</option>
            </select>
        </label><br />
        <label>
            <span class="updateSup-span">年龄</span>
            <input id="age" name="age" type="text" value="${sup.age}" class="updateSup-input-text inshadow txtclick" placeholder="请输入出生日期" />
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <span class="updateSup-span">用户住址</span>
            <input id="address" name="address" type="text" value="${sup.address}" class="updateSup-input-text inshadow txtclick" placeholder="请输入用户住址" />
            <span  style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <span class="updateSup-span">用户电话</span>
            <input id="phone" name="phone" type="text" value="${sup.phone}" class="updateSup-input-text inshadow txtclick" placeholder="请输入电话号码" />
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <span class="updateSup-span">合作描述</span>
            <input id="describe" name="describe" type="text" value="${sup.describe}" class="updateSup-input-text inshadow txtclick" placeholder="请输入电话号码" />
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <input id="updateSup" type="button" class="btnclick addUser-input-save inshadow-white" value="修改" />
        </label>
        <label>
            <input type="button" class="goback btnclick addUser-input-goback inshadow-white" value="返回" />
        </label>
    </form>
</div>
<%@ include file="/JSP/Common/foot.jsp"%>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/JS/supplierUpdate.js" ></script>--%>
<script type="text/javascript">
    $(function () {
        var supName = $("#supName");
        var contacts = $("#contacts");
        var age = $("#age");
        var address = $("#address");
        var phone = $("#phone");
        var describe = $("#describe");
        var updateSup = $("#updateSup");
        var updateSupForm = $("#updateSupForm");

        supName.attr("validateStatus", true);
        contacts.attr("validateStatus", true);
        age.attr("validateStatus", true);
        address.attr("validateStatus", true);
        phone.attr("validateStatus", true);
        describe.attr("validateStatus", true);


        supName.on({
            focus:function () {
                setStyles(supName.next(), {'color':'red'}, "(公司不能为空)", false);
            },
            blur:function () {
                var len = supName.val().length;
                if (len > 0){
                    setStyles(supName.next(), {'color':'#87CEED'}, getImgTick() + "(姓名符合)", true);
                }else {
                    setStyles(supName.next(), {'color':'#87CEED'}, getImgCross() + "(不能为空)", true);
                }
            }
        });


        contacts.on({
            focus:function () {
                setStyles(contacts.next(), {'color':'red'}, "(公司不能为空)", false);
            },
            blur:function () {
                var len = contacts.val().length;
                if (len > 0){
                    setStyles(contacts.next(), {'color':'#87CEED'}, getImgTick() + "(姓名符合)", true);
                }else {
                    setStyles(contacts.next(), {'color':'#87CEED'}, getImgCross() + "(不能为空)", true);
                }
            }
        });

        age.on({
            focus:function () {
                setStyles(age.next(), {'color':'red'}, "(年龄不能为空)")
            },
            blur:function () {
                var dateFormat =/^[0-9]*$/;
                var num = age.val();
                if (dateFormat.test(num)){
                    setStyles(age.next(), {'color':'#87CEED'}, getImgTick() + "(OK)", true);
                }else {
                    setStyles(age.next(), {'color':'red'}, getImgCross() + "(不能为空)", false);
                }
            }
        });

        phone.on({
            focus:function () {
                setStyles(phone.next(), {'color':'red'}, "(请输入手机号码)", false);
                console.log("进入输入手机号码");
            },
            blur:function () {
                var phoneFormat = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
                var p = phone.val();
                if (phoneFormat.test(p)){
                    setStyles(phone.next(), {'color':'#87CEED'}, getImgTick() + "(号码符合)", true);
                    console.log("号码验证正确");
                }else{
                    setStyles(phone.next(), {'color':'red'}, getImgCross() + "(号码不符合,请重新输入)", false);
                    console.log("号码验证错误");
                }
            }
        });

        describe.on({
            focus:function (){
                setStyles(describe.next(), {'color':'red'}, "(请输入合作描述)", false);
            },
            blur:function () {
                var val = describe.val().length;
                if (val > 0){
                    setStyles(describe.next(), {'color':'#87CEED'}, getImgTick() + " OK", true);
                }else {
                    setStyles(describe.next(), {'color':'red'}, getImgCross() + "(不能为空)", false);
                }
            }
        });

        address.on({
            focus:function (){
                setStyles(address.next(), {'color':'red'}, "(请输入住址)", false);
            },
            blur:function () {
                var val = address.val().length;
                if (val > 0){
                    setStyles(address.next(), {'color':'#87CEED'}, getImgTick() + " OK", true);
                }else {
                    setStyles(address.next(), {'color':'red'}, getImgCross() + "(不能为空)", false);
                }
            }
        });

        updateSup.on({
            click:function (){
                console.log(supName.attr("validateStatus"));
                console.log(contacts.attr("validateStatus"));
                console.log(age.attr("validateStatus"));
                console.log(phone.attr("validateStatus"));
                console.log(describe.attr("validateStatus"));
                console.log(address.attr("validateStatus"));
                if(supName.attr("validateStatus") != "true"){
                    supName.blur();
                }else if(contacts.attr("validateStatus") != "true"){
                    contacts.blur();
                }else if(age.attr("validateStatus") != "true"){
                    age.blur();
                }else if(phone.attr("validateStatus") != "true"){
                    phone.blur();
                }else if(describe.attr("validateStatus") != "true"){
                    describe.blur();
                }else if(address.attr("validateStatus") != "true"){
                    address.blur();
                }else{
                    if(confirm("是否确认提交数据")){
                        updateSupForm.submit();
                    }
                }
            }
        });
    })
</script>